<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Cache-Control" content="o-transform">
		<meta http-equiv="Cache-Control" content="no-siteapp">


		<title>讨论区 - 智慧教学平台</title>

		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="../static/font-awesome//4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="../static/highlight.js/9.8.0/monokai-sublime.min.css">
		<link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="../app/css/libs/katex/0.6.0/katex.min.css">
		<link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
		<link rel="stylesheet" href="../app/css/dest/styles.css?=2016121272249">

		<link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="../css/muke.css">
		<link rel="stylesheet" href="../css/index.css" />

		<script type="text/javascript" src="../js/jquery.SuperSlide.2.1.1.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/index.js"></script>

		<style>

			/* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }
		#invite-user .modal-body .form-label {
			margin-bottom: 16px;
			font-size:14px;
		}
		#invite-user .modal-body .form-invite {
			width: 80%;
			padding: 6px 12px;
			background-color: #eeeeee;
			border: 1px solid #cccccc;
			border-radius: 5px;
			float: left;
			margin-right: 10px;
		}
		#invite-user .modal-body .msg-modal-style {
			background-color: #7dd383;
			margin-top: 10px;
			padding: 6px 0;
			text-align: center;
			width: 100%;
		}
		#invite-user .modal-body .modal-flash {
			position: absolute;
			top: 53px;
			right: 74px;
			z-index: 999;
		}
		/* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>



	</head>

	<body>
		<!-- 顶部 -->
		<div class="width100 float_l img_backg1" style="margin-top: -70px;" id="bt">
			<div class="width100 float_l height80 line_hei80">
				<div class="float_l">
					<div class="float_l margin_l20">
						<a href="../../student/index.html"> <img src="../img/uiz1.png"></a>
					</div>
					<div class="float_l">
						<ul class="ul_li fon_siz16">
							<li><a class="color_black" href="../../student/curricular/courses/index.html">课程</a></li>
							<li><a class="color_black" href="../../student/department.html">院系</a></li>
							<li><a class="color_black" href="../../student/curricular/paths/index.html">名师专栏</a></li>

						</ul>
					</div>
				</div>

				<div class="float_r">
					<div class="float_l top_input">
						<input class="posi_relative" type="text" name="" id="" placeholder="请输入想搜索的内容...">
						<img class="img_sousuo bianshou" src="../img/uiz4.png">
					</div>
					<div class="float_l margin_l20">
						<img src="../img/uiz5.png">
					</div>
					<div class="float_l margin_l35">
						<img src="../img/uiz6.png">
					</div>
					<div class="float_l margin_l30 margin_r40">
						<a class="color_black" href="../../student/curricular/user/13/course.html" v-show="isCenter">个人中心</a>&nbsp;&nbsp;
						<a class="btn btn-default navbar-btn sign-in" href="javascript:void(0)" @click="login()" v-show="isShow">登录</a>
						<el-dropdown>
							<div class="color_black" v-show="isCenter">
								<img :src="userPhoto" width="45px">
								<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="shezhi()">设置</el-dropdown-item>
								<el-dropdown-item @click.native="tuichu()">退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>

				</div>

			</div>
		</div>

		<script type="text/javascript">
			var bt = new Vue({
				el: "#bt",
				mounted: function() {
					var roleNames = sessionStorage.getItem("roleNames");
					console.log(roleNames);
					if (roleNames != null && roleNames == ("学生")) {
						this.isShow = false;
						this.isCenter = true;
						this.userPhoto = sessionStorage.getItem("userPhoto");
					}

				},
				data: {
					isShow: true,
					isCenter: false,
					userPhoto: '',
				},
				methods: {
					login: function() {
						window.location.href = "http://127.0.0.1/login.html";
					},
					tuichu: function() {
						sessionStorage.clear();
						localStorage.clear();
						window.location.href = "http://127.0.0.1/login.html";
					},
					shezhi: function() {
						window.location.href = "/student/curricular/user/13/personal.html";
					}
				}
			});
		</script>

		<div class="container layout layout-margin-top">
			<div class="row">
				<div class="col-md-9 layout-body">
					<div class="content" id="postPage">
						<!-- 帖子分类导航栏 -->
						<ul class="nav nav-tabs question-types" role="tablist">
							<li role="presentation">
								<a role="tab" v-on:click="getAll()" toggle="tab">全部</a>
							</li>
							<li v-for="type in typeList" role="presentation">
								<a role="tab" toggle="tab" v-on:click="getTypename($event)">{{type.typeName}}</a>
							</li>
							<div class="question-sort">
								<a v-on:click="btnNew()" href="#">最新</a>/
								<a v-on:click="btnHot()" href="#">最热</a>
							</div>
						</ul>
						<!-- 帖子列表 -->
						<div class="tab-content">
							<div id="postList">

								<ul v-loading="loading" v-for="post in posts" class="row question-items" :data="posts.slice((currentPage-1)*pagesize,currentPage*pagesize)">
									<li class="question-item">
										<div class="col-md-10">
											<div class="col-sm-2 question-item-author">
												<div class="user-avatar ">
													<!-- 用户头像 -->
													<a class="avatar" href="#" target="_blank">
														<img :src="post.userImg"/>
													</a>
												</div>
											</div>
											<div class="col-sm-10">
												<h4>
													<span v-if="post.postIsstick"><img src="../img/topQuestion.png"></span>

													<a class="question-item-title" v-if="post.isDelete" v-on:click="jumpPostDetails(post)" target="_blank">
														该贴已被删除，暂时不能查看
													</a>
													<a class="question-item-title" v-else v-on:click="jumpPostDetails(post)" target="_blank">
														{{post.postTitle}}
													</a>
												</h4>
												<div class="question-item-summary">
													<div class="user-username ">
														<!-- 用户名称 -->
														<a class="avatar" href="#" target="_blank">{{post.userName}}</a>
													</div>
													<!-- 回复时间和最后回复人名称 -->
													<span class="question-item-date">{{post.replyTime}}</span>
												</div>
											</div>
										</div>
										<div class="col-md-2 question-item-rank">
											<div class="question-item-answered">
												<div>{{post.replyLikenum}}</div>
												<div>点赞</div>
											</div>
											<div class="question-item-views">
												<div>{{post.replyBrowse}}</div>
												<div>浏览</div>
											</div>
											<div class="question-item-answered">
												<div>{{post.replyNum}}</div>
												<div>回复</div>
											</div>
										</div>
									</li>
								</ul>


								<!-- 分页条-->
								<el-pagination background layout="prev, pager, next" @current-change="current_change" :total="total">
								</el-pagination>
							</div>
						</div>
					</div>

				</div>


				<div class="col-md-3 layout-side">
					<!-- 发帖 -->

					<a class="btn side-btn" href="publicPost.html" data-toggle="modal" data-sign="signin">我要发帖</a>
					<!-- 右侧消息栏 -->
					<div class="panel panel-default panel-userinfo">
						<div class="panel-body body-userinfo">
							<div class="media userinfo-header">
								<div class="media-left">
									<div class="user-avatar">

										<a class="avatar" href="#sign-modal" data-toggle="modal" data-sign="signin">
											<img class="circle" src="../img/logo-grey.png">
										</a>

									</div>
								</div>
								<div class="media-body">

									<span class="media-heading username">欢迎来到智慧教育平台</span>
									<p class="vip-remain">做实验，学编程</p>

								</div>
							</div>

							<div class="userinfo-footer row">
								<div class="col-md-6 col-xs-6 pos-left">

									<a href="#sign-modal" data-toggle="modal" data-sign="signin"><span class="glyphicon glyphicon-bookmark"></span>
										加入私有课</a>

								</div>
								<div class="col-md-6 col-xs-6 pos-right">
									<a href="/contribute" target="_blank"><span class="glyphicon glyphicon-send"></span> 我要投稿</a>
								</div>

								<div id="join-private-course" class="modal fade words-ctrl" tabindex="-1" role="dialog">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<h4 class="modal-title">加入私有课</h4>
											</div>
											<div class="modal-body">
												<div style="margin:15px 0; font:16px;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
												<form id="private-course-form" method="POST" action="/courses/join">
													<div class="form-group">
														<label for="code">邀请码</label>
														<input class="form-control" id="code" name="code" type="text" value="">
														<input name="_csrf_token" type=hidden value="1483789088##bbf83c51243ab12daa94911c8865a65bdc66c4d8">
													</div>
												</form>

											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
												<button type="button" class="btn btn-primary" onclick="document.getElementById('private-course-form').submit();">确定</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 右侧消息栏 -->
					<div class="sidebox">
						<div class="sidebox-header">
							<h4 class="sidebox-title">最热路径</h4>
						</div>
						<div class="sidebox-body course-content side-list-body">
							<a href="/paths/python"><img style="width:25px;height:25px" src="../img/1471513769430.png"> Python 研发工程师</a>
							<a href="/paths/bigdata"><img style="width:25px;height:25px" src="../img/1471513926288.png"> 大数据工程师</a>
							<a href="/paths/cpp"><img style="width:25px;height:25px" src="../img/1471513793360.png"> C++ 研发工程师</a>
							<a href="/paths/security"><img style="width:25px;height:25px" src="../img/1471513867033.png"> 信息安全工程师</a>
							<a href="/paths/linuxsys"><img style="width:25px;height:25px" src="../img/1471514004752.png"> Linux 运维工程师</a>
						</div>

					</div>
				</div>
			</div>
		</div>


		<!-- 页脚 -->
		<div class="width100 float_l padding_t30 height193">
			<div class="width_1200 margin_auto">
				<div class="width100 float_l text_c margin_b30">
					<a class="img_backg5" href="#"></a>
					<a class="img_backg6 posi_relative wexinmaxianshi" href="#"><i class="weixinweima dis_none"><img src="img/idx-btm.png"></i></a>
					<a class="img_backg7" href="#"></a>
					<a class="img_backg8" href="#"></a>
				</div>
				<div class="width100 float_l text_c yejiao color_gray">
					<a>关于我们</a>
					<a>企业合作</a>
					<a>人才招聘</a>
					<a>讲师招募</a>
					<a>联系我们</a>
					<a>意见反馈</a>
					<a>友情链接</a>
				</div>
				<div class="width100 float_l text_c border_t margin_t20 padding_t20 color_gray fon_siz12">
					<span>© 2016 imoroc.com 京ICP备13042132号</span>
				</div>
			</div>
		</div>

		<!-- vue -->
		<script type="text/javascript">
			if (sessionStorage.getItem("access_token") != null) {
				axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
			}

			var postPage = new Vue({
				el: '#postPage',

				mounted: function() {
					this.token = sessionStorage.getItem("access_token");
					console.log("token==>" + this.token);
					this.queryPost();
					this.queryType();
				},

				data() {
					return {
						loading: true,
						typeName: "",
						orderBy: "replyTime",
						total: 50, //默认数据总数
						pagesize: 10, //每页的数据条数
						currentPage: 1, //默认开始页面
						posts: [],
						typeList: [],
						token: ''
					}

				},
				methods: {
					queryPost() {

						let params = new URLSearchParams();
						params.append("typeName", this.typeName);
						params.append("page", this.currentPage);
						params.append("rows", this.pagesize);
						params.append("orderBy", this.orderBy);
						axios({
							method: 'post',
							url: '/api/bbs/post/getAllPost',
							data: params,
							headers: {
								//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
							}
						}).then(res => {
							res = res.data;
							this.posts = res.rows;
							this.total = res.total;
							console.log('posts==>' + this.posts);
							this.loading = false;
						})

					},
					queryType() {
						let params = new URLSearchParams();
						axios({
							method: 'post',
							url: '/api/bbs/type/getAllType',
							data: params,
							headers: {
								//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
							}
						}).then(res => {
							res = res.data;
							this.typeList = res;
							console.log('typeList==>' + this.typeList);
						})
					},
					current_change: function(currentPage) {
						this.currentPage = currentPage;
						this.queryPost();
					},
					getAll: function() {
						this.typeName = "";
						this.queryPost();
					},
					getTypename: function(event) {
						this.typeName = event.target.innerHTML;
						this.queryPost();
						console.log('event==>' + event.target.innerHTML);
					},
					btnNew: function() {
						this.orderBy = "replyTime";
						this.queryPost();
					},
					btnHot: function() {
						this.orderBy = "replyLikenum";
						this.queryPost();
					},
					jumpPostDetails: function(post) {
						let params = new URLSearchParams();
						params.append("replyId", post.replyId);
						axios({
							method: 'post',
							url: '/api/bbs/reply/updateBrowse',
							data: params,
							headers: {
								//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
							}
						});
						sessionStorage.setItem("postId", post.postId);
						window.location.href = "postDetails.html";

					}
				}

			})
		</script>

	</body>
</html>
